<style lang="less">
    @import "${aggregate.name}_list.less";
</style>
<template>
<div>
	<div ref="tableTop">
		<div class="es-list-search-advance">
			<Form :model="${aggregate.camelName}Query.form" inline ref="${aggregate.camelName}QueryForm">
				<Row>
<#list aggregate.searchFields as field>
<#if field.extend==false>
					<i-col span="3">
						<FormItem prop="${field.camelName}">
<#if field.type=='date'>
							<Date-picker
								type="date"
								v-model="${aggregate.camelName}Query.form.${field.camelName}"
								clearable
								placeholder="${field.desc}"
<#if field.name?contains('start')> 
								:options="startTimeOption"
								@on-change="onStartTimeChange"
<#else>
								:options="endTimeOption"
								@on-change="onEndTimeChange"
</#if>
							></Date-picker>
<#elseif field.name?contains('type') || field.name?contains('status')>
							<Select placeholder="${field.desc}" v-model="${aggregate.camelName}Query.form.${field.camelName}" clearable>
								<Option :value="0">禁用</Option>
								<Option :value="1">启用</Option>
							</Select>
<#elseif field.name?contains('is_')>
	              			<div class="ivu-input ivu-input-checkbox">
								<Checkbox
									size="large"
									v-model="${aggregate.camelName}Query.form.${field.camelName}"
									:true-value="1"
									:false-value="0"
									>${field.desc}
								</Checkbox>
							</div>
<#else>
							<Input v-model="${aggregate.camelName}Query.form.${field.camelName}" clearable placeholder="${field.desc}"></Input>	
</#if>
						</FormItem>
					</i-col>
</#if>
</#list>
					<i-col span="6" class="es-btn-group">
						<Tooltip content="重置搜索条件" placement="top" :transfer="true">
							<Button type="text" @click="clear${aggregate.largeCamelName}QueryForm">
								<Icon type="md-refresh"/>
							</Button>
						</Tooltip>
						<Button type="primary" @click="search${aggregate.largeCamelName}List">搜索</Button>
<#list aggregate.statisticFields as field>
<#if field.extend='true'>
						<Button type="text" class="es-btn-advance" @click="chang${aggregate.largeCamelName}Query1Drop">
							{{${aggregate.camelName}Query.drop ? "精简检索" : "高级检索"}}
							<Icon :type="${aggregate.camelName}Query.drop ? 'ios-arrow-up' : 'ios-arrow-down'"/>
						</Button>
<#break>
</#if>						
</#list>						
					</i-col>
					<i-col span="3" style="text-align:right;">
						<Button type="primary" @click = "toAdd${aggregate.largeCamelName}" style="margin-right:10px;"><Icon type="md-add"/>添加</Button>
						<Button type="primary" @click = "download${aggregate.largeCamelName}Excel" style="margin-right:10px;"><Icon type="md-download"/>下载Excel</Button>
					</i-col>
				</Row>
<#list aggregate.statisticFields as field>
<#if field.extend='true'>				
				<Row v-show="${aggregate.camelName}Query.drop">
<#list aggregate.searchFields as field>
<#if field.extend==true>
					<i-col span="3">
						<FormItem prop="${field.camelName}">
<#if field.type=='date'>
							<Date-picker
								type="date"
								v-model="${aggregate.camelName}Query.form.${field.camelName}"
								clearable
								placeholder="${field.desc}"
							></Date-picker>
<#elseif field.name?contains('type') && field.name?contains('status')>
							<Select placeholder="${field.desc}" v-model="${aggregate.camelName}Query.form.${field.camelName}" clearable>
								<Option :value="0">禁用</Option>
								<Option :value="1">可用</Option>
							</Select>
<#elseif field.name?contains('is_')>
							<div class="ivu-input ivu-input-checkbox">
								<Checkbox
									size="large"
									v-model="${aggregate.camelName}Query.form.${field.camelName}"
									:true-value="1"
									:false-value="0"
									>${field.desc}
								</Checkbox>
							</div>
<#else>
							<Input v-model="${aggregate.camelName}Query.form.${field.camelName}" clearable placeholder="${field.desc}"></Input>	
</#if>
						</FormItem>
					</i-col>
</#if>
</#list>
				</Row>
<#break>
</#if>						
</#list>
			</Form>
		</div>
	</div>
	<Table
		border
		:columns="${aggregate.camelName}Query.columns"
		:data="${aggregate.camelName}Query.data"
		ref="${aggregate.camelName}Table"
		:loading="${aggregate.camelName}Query.loading"
		v-table-scroll
		class="ivu-table-wrapper-noborder ivu-table-hidden"
		:height="tableHeight"
		highlight-row
	></Table>
	<div ref="tableBottom">
		<div class="ivu-table-extends">
<#if (aggregate.statisticFields?size>0)>
			{{${aggregate.camelName}Query.total.count}} 条<#if aggregate.desc??>${aggregate.desc}<#else>数据</#if>记录.<#list aggregate.statisticFields as field><#if field.type=='bigdecimal'>${field.desc}：{{${aggregate.camelName}Query.total.${field.camelName}}} 元.<#else>${field.desc}：{{${aggregate.camelName}Query.total.${field.camelName}}} 条.</#if></#list>
<#else>
			{{${aggregate.camelName}Query.total}} 条记录。
</#if>
		</div>
		<div class="es-list-page">
			<Page
				:current="${aggregate.camelName}Query.form.pageNo"
				:page-size="${aggregate.camelName}Query.form.pageSize"
<#if (aggregate.statisticFields?size>0)>
				:total="${aggregate.camelName}Query.total.count"
<#else>
				:total="${aggregate.camelName}Query.total"
</#if>
				@on-change="change${aggregate.largeCamelName}Page"
			/>    
		</div>
	</div>
</div>
</template>

<script>
import "./${aggregate.name}_list.less";
import {
	remote${aggregate.largeCamelName}QueryList,
	remote${aggregate.largeCamelName}Remove
} from '@/api/clean/admin/${domain.system}'
import pageMixin from "@mixins/page.js";

export default {
    mixins: [pageMixin],
    data () {
        return {
			${aggregate.camelName}Query: {
				loading:false,
				drop: false,
				form: {
					pageNo: 1,
					pageSize: 10,
<#list aggregate.fields as field>
					${field.camelName} : null,
</#list>
                },
				data: [],
<#if (aggregate.statisticFields?size>0)>
		        total: {
					count: 0,
<#list aggregate.statisticFields as field>
<#if field.type=='bigdecimal'>
					${field.camelName}: '0.00',
<#else>
					${field.camelName}: 0,
</#if>
</#list>	
				},
<#else>
				total: 0,
</#if>
				columns:[
<#list aggregate.fields as field>
<#if field.type=='bigdecimal'>
					{
						title: "${field.desc}",
						key: "${field.camelName}",
						render: (h, params) => {
							return h("div", [h("span", params.row.${field.camelName} ? params.row.${field.camelName}.toFixed(2) : "0.00")]);
						}
					},
<#elseif field.name == 'status'>
					{
						title: "状态",
						key: "status",
                        render: (h, params) => {
                            let re = ''
                            if (params.row.status === 0) {
                                return h('div', [
                                    h(
                                        'span',
                                        '禁用'
                                    )
                                ])
                            } else if (params.row.status === 1) {
                                return h('div', [
                                    h(
                                        'span',
                                        '可用'
                                    )
                                ])
                            }
                        }
                    },
<#else>
					{
						title: "${field.desc}",
						key: "${field.camelName}",
						// width: 200,
					},
</#if>
</#list>
                    {
                        title: "操作",
                        key: "action",
                        align: "center",
                        fixed: "right",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "a",
                                    {
                                    	on: {
                                    		click: () => {
                                    			this.show${aggregate.largeCamelName}Detail(params.row.id)
											}
                                    	}
                                    },
                                    "详情"
                                ),
                                h("span","   "),
                                h(
                                    "a",
                                    {
                                        on: {
                                            click: () => {
                                                this.toModify${aggregate.largeCamelName}(params.row.id)
                                            }
                                        }
                                    },
                                    "修改"
                                ),
                                h("span","   "),
                                h(
                                    "a",
                                    {
                                        on: {
                                            click:()=>{
                                                this.remove${aggregate.largeCamelName}(params.row.id)
                                            }
                                        }
                                    },
                                    "删除"
                                )
                            ]);
                        }
                    }
                ],
            },
        }
    },
    mounted(){
        this.init${aggregate.largeCamelName}List();
    },
    methods: {
        init${aggregate.largeCamelName}List: function() {
        	// 初始化${aggregate.desc}列表
            this.${aggregate.camelName}Query.form.pageNo = 1;
        	this.refresh${aggregate.largeCamelName}List();
        },
        refresh${aggregate.largeCamelName}List: function() {
	        // 刷新${aggregate.desc}列表，不翻页
            this.${aggregate.camelName}Query.loading = true;
            remote${aggregate.largeCamelName}QueryList(this.${aggregate.camelName}Query.form).then(res => {
                this.${aggregate.camelName}Query.loading = false;
                if (res.code != 10000) {
                    this.$Message.error(res.msg);
                    return;
                }
                this.${aggregate.camelName}Query.data = res.data.rows;
<#if (aggregate.statisticFields?size>0)>
				this.${aggregate.camelName}Query.total = {
					count: res.data.total,
<#list aggregate.statisticFields as field>
<#if field.type='bigdecimal'>
					${field.camelName}: res.data.total${field.largeCamelName}?res.data.total${field.largeCamelName}.toFixed(2):'0.00',
<#else>
					${field.camelName}: res.data.total${field.largeCamelName}?res.data.total${field.largeCamelName}:'0',
</#if>
</#list>
				};
<#else>
				this.${aggregate.camelName}Query.total = res.data.total
</#if>
			});
        },
        clear${aggregate.largeCamelName}QueryForm: function() {
            // 清除查询条件
            this.$refs.${aggregate.camelName}QueryForm.resetFields();
        },
        search${aggregate.largeCamelName}List: function() {
            // 查询${aggregate.desc}
            this.${aggregate.camelName}Query.form.pageNo = 1;
            this.refresh${aggregate.largeCamelName}List();
        },
        chang${aggregate.largeCamelName}Query1Drop: function() {
            // 修改查询模式 高级 精简
            this.${aggregate.camelName}Query.drop = !this.${aggregate.camelName}Query.drop;
        },
        change${aggregate.largeCamelName}Page: function(pageNo) {
            // 切换${aggregate.desc}分页
            this.${aggregate.camelName}Query.form.pageNo = pageNo;
            this.refresh${aggregate.largeCamelName}List();
        },
        toAdd${aggregate.largeCamelName}:function(){
			this.$emit("parentChangeTab", "add");
        },
        toModify${aggregate.largeCamelName}:function(id){
			this.$emit("parentChangeTab", "update", id);
        },
        show${aggregate.largeCamelName}Detail: function(id){
            this.$emit("parentChangeTab", "detail", id);
        },
        remove${aggregate.largeCamelName}: function(id){
            this.$Modal.confirm({
                title: '确认删除',
                content: '您确认要删除这条${aggregate.desc}记录?',
                onOk: () => {
                    remote${aggregate.largeCamelName}Remove({ id: id }).then(res => {
                        if (res.code != 10000) {
                            this.$Message.error(res.msg)
                            return
                        }
                        this.$Message.success(res.msg)
                        this.init${aggregate.largeCamelName}List()
                    })
                }
            })
        },
        download${aggregate.largeCamelName}Excel: function() {
            // 下载${aggregate.desc}文件
            remote${aggregate.largeCamelName}DownloadFile(this.${aggregate.camelName}Query.form).then(res => {
                if (res.code != 10000) {
                    this.$Message.error("下载Excel文件失败!");
                    return;
                }
                let url = res.data;
                let link = document.createElement("a");
                link.style.display = "none";
                link.href = url;
                document.body.appendChild(link);
                link.click();
            });
        },
<#list aggregate.searchFields as field>
<#if field.type=='date'>
		onStartTimeChange(startTime, type) {
			this.endTimeOption = {
				disabledDate(endTime) {
					return endTime < new Date(startTime); //|| endTime > Date.now();
				}
			};
		},
		onEndTimeChange(endTime, type) {
			this.startTimeOption = {
				disabledDate(startTime) {
					return startTime > new Date(endTime); //|| startTime > Date.now();
				}
			};
		},
	<#break>
</#if>
</#list>
    }
}
</script>